<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="format-detection" content="telephone=no" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>我的客服</title>
<link href="__PUBLIC__/index/css/coupon.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="__PUBLIC__/index/js/jquery-1.8.1.js"></script>
	<link href="__PUBLIC__/index/css/liuyan.css" type="text/css" rel="stylesheet">
<style type="text/css">
.login .top .name{text-align:center;margin-bottom:10px}
.login .top .name img{vertical-align:middle}
.login .top .name span{color:#FFF;margin-left:8px}
</style>
</head>
<body>
 <div class="login">
         <div class="top">
            <div class="bian"><a href="{:U('Gj/update_index')}"><img src="__PUBLIC__/index/image/bianji.png" width="103" height="35" /></a></div>
            <div class="login-title"><p><img src="{$img}" style="border-radius:50%;" width="110" height="110"></p></div>
       <div class="name"><?php if($da==1){?><img src="__PUBLIC__/index/image/zuan.png" width="20" height="20"><?php }?><span>{$nickname}</span></div>
            <ul>
                <li><a href="{:U('Gj/m_status')}"> 
                  <?php if($m_status==0){ ?><img src="__PUBLIC__/index/image/deail.png"><?php } ?>
                  <?php if($m_status==1){ ?><img src="__PUBLIC__/index/image/coupon/deail2.png"><?php } ?>
                  </a></li>
                <li><a href="{:U('Gj/coupon_list')}"><img src="__PUBLIC__/index/image/youh.png"></a></li>
                <li><a href="https://payapp.weixin.qq.com/life/index?showwxpaytitle=1&exportkey=AdwmP9WcSgv7n%2BDFA%2F5EeB4%3D&clientversion=26031732&devicetype=android-22&pass_ticket=8BbXQS13EITPqoFsFioDJ9twPymaitnStoMlgOG1EUczWCbF%2F%2BtenYWB%2Bbuyjvhm#/"><img src="__PUBLIC__/index/image/fuwu1.png"></a></li>
                <li><a href="{:U('Gj/kefu')}"><img src="__PUBLIC__/index/image/kefu.png"></a>
                	<p><img src="__PUBLIC__/index/image/asas.png" width="15" height="15"></p>
                </li>
            </ul>
         </div>         
		 
<style type="text/css">
.kf_addr{border:1px #F5E9DD solid;border-left:0px;border-right:0px;background-color:#f0f0f0;margin:2px 0px;}.kf_addr h2:after,.kf_addr h2:before{display:inline-block;width:30px;height:24px;content:"";margin-top:3px;background-repeat:no-repeat;background-position:center;background-size:60% auto;}.kf_addr h2:after{float:right;background-image:url(__PUBLIC__/index/image/ico_down.png);}.kf_addr h2:before{float:left;background-image:url(__PUBLIC__/index/image/ico_home.png);border-right:1px #ccc solid;margin-right:8px;padding-right:8px;}.kf_addr h2{font-size:14px;font-weight:100;line-height:30px;}h2.kf_part_title{clear:both;font-size:14px;padding-left:5px;font-weight:100;line-height:36px;margin:10px 0px;background-image:url(/Public/index/image/p_title_bg.jpg);background-repeat:no-repeat;}dl.type_list{margin:0px 10px;padding:0px;}dl.type_list dd{display:inline-block;margin:2px 0px;float:left;width:25%;line-height:20px;font-size:13px;}dl.type_list dd:before,dl.type_list dd.chk:before{display:inline-block;width:20px;line-height:20px;height:20px;content:"";float:left;background-image:url(/Public/index/image/chkico.png?t=1ab3);background-repeat:no-repeat;background-position:top;background-size:80% auto;}dl.type_list dd.chk:before{background-position:bottom;}dl.kf_list{margin:0px;margin-left:30px;color:#666;}dl.kf_list dd{display:inline-block;width:100%;border-top:1px #ccc solid;padding:5px 0px;}dl.kf_list dd:first-child{border:0px;}dl.kf_list dd em{display:inline-block;width:60px;height:60px;border-radius:50%;border:3px #C2C1BC solid;float:left;margin-left:-25px;margin-right:6px;background-size:cover;background-position:center;}dl.kf_list dd h3{font-size:13px;margin:0px;font-weight:100;}dl.kf_list dd h3:before{}dl.kf_list dd p{margin:0px;padding:0px;font-size:10px;line-height:17px;}.cc{clear:both;}#popaddrlistmark{display:none;position:fixed;left:0px;top:0px;width:100%;height:100%;right:0px;bottom:0px;background-color:rgba(0,0,0,0.4);z-index:8;}#popaddrlist{display:none;position:fixed;left:10%;right:10%;top:10%;bottom:10%;z-index:9;background-color:#fff;border-radius:10px;}#popaddrlist h3{font-size:15px;background-color:#f0f0f0;margin:0px;border-radius:10px 10px 0px 0px;padding:5px 5%;}#popaddrlist dl{position:absolute;width:100%;top:50px;bottom:0px;left:0px;overflow:auto;}#popaddrlist dl dd{display:inline-block;line-height:24px; font-size:14px;margin:0px;padding:5px 5%;border-bottom:1px #ccc solid;width:90%;}
</style>	 
		 <div class="kf_part">
		 	<div class="kf_addr">
				<h2>{$xq.name}</h2>
			</div>
		 	<!--<h2 class="kf_part_title">问题类型</h2>-->
			<!--<dl class="type_list"></dl>-->
			<div class="cc"></div>
		 	<h2 class="kf_part_title">客服信息</h2>
			<dl class="kf_list"></dl>
		 </div>
</div>

<div id="popaddrlistmark"></div>
<div id="popaddrlist">
	<h3>所有小区</h3>
	<dl><volist name="xqList" id="xq" >
		<dd d_scid="{$xq.sid}">{$xq.name}</dd>
	</volist></dl>
</div>


	<div class="pj">
		<div class="pjd">
			<h2>留言板</h2>
			<input type="hidden" id="did" />
			<textarea id="pj" rows="5" placeholder="您好，请您留言,最多三十个字哟" style="color: #000;" maxlength="30"></textarea>
			<div class="plybtn">
				<span id="liu">留言</span>
				<span id="close">关闭</span>
			</div>
		</div>
	</div>



<script language="javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script language="javascript">

wx.config({
    debug: false, 
    appId: '',  
    timestamp: 121221, 
    nonceStr: '', 
    signature: '', 
    jsApiList: [] 
});
wx.ready(function(){});

$(function(){
	$('.type_list dd').click(function() {
	    $('.type_list dd.chk').removeClass('chk');
	    $(this).addClass('chk')
	});
	$('.kf_list dd').click(function() {
	    var parm = {
	        key: $('.type_list dd.chk').text(),
	        kf: $(this).attr('d_kfid')
	    }
	    if (parm.key.length < 1) {
	        alert('请选择关键词!');
	        return false
	    }
	    var url = '/index.php/Gj/createConnect';
	    $.post(url, parm,
	    function(obj) {
	        if (obj.s) {
	            wx.closeWindow();
	        } else {
	            alert(obj.m)
	        }
	    },
	    'json')
	});
	$('.kf_addr').click(function() {
	    $('#popaddrlistmark').fadeIn(function() {
	        $('#popaddrlist').fadeIn()
	    })
	});
	$('#popaddrlist dd').click(function() {
	    var scid = $(this).attr('d_scid');
	    var x_name = $(this).text();
	    if (!scid) {
			$('#popaddrlist').fadeOut(function() {
		        $('#popaddrlistmark').fadeOut()
		    });
	        return false;
	    }
	    getDetial(scid,x_name)
	});
	getDetial({$scid});
	$('#popaddrlistmark').on('click',function(){
		 $('#popaddrlist').fadeOut(function() {
	        $('#popaddrlistmark').fadeOut()
	    })
	});
});	

function getDetial(scid,x_name){
	//liuzem begin 
//	var url1= '/index.php/Gj/getapt/scid/' + scid;
//	$.getJSON(url1,function(obj) {
//		$(".kf_addr h2").text(obj.d);
//	});
	//liuzem end
	
	
	
	var url = '/index.php/Gj/getkeyandmanage/scid/' + scid;
$.getJSON(url,function(obj) {
//  $('.type_list').empty();
//  $.each(obj.d.keys,function(i, d) {
//      $('.type_list').append('<dd>' + d.title + '</dd>')
//  });
//  $('.type_list dd').unbind('click').click(function() {
//      $('.type_list dd.chk').removeClass('chk');
//      $(this).addClass('chk')
//  });
	$(".kf_addr h2").text(x_name);
    $('.kf_list').empty();
    $.each(obj.d.kflist,function(i, d) {
        var thtml = '';
        if (d.kf_info) {
            thtml = '<dd d_kfid="' + d.kf_info.kf_account + '" d_status="'+d.kf_info.online_status+'">';
			thtml += ' <em style="background-image: url(' + d.kf_info.kf_headimgurl + ')"></em>';
			thtml += ' <h3>'+d.kf_info.kf_nickname+'</h3>';
			thtml += ' <p>';
			
			if(d.kf_info.online_status)
				thtml += '<img src="__PUBLIC__/index/image/kefu/3.png" style="width:10px;height:10px">为您服务';
			else
				thtml += '<img src="__PUBLIC__/index/image/kefu/5.png" style="width:10px;height:10px">离线请留言';
				
			thtml += '<img src="__PUBLIC__/index/image/kefu/2.png" style="width:10px;height:10px">:' + d.phone + '<br />'+'<img src="__PUBLIC__/index/image/kefu/4.png" style="width:14px;height:14px">' + d.kf_info.introduce + '</p>';
			thtml += ' </dd>';
	        $('.kf_list').append(thtml)
        }        
    });
    $('.kf_list dd').unbind('click').click(function() {
    	var dst = $(this).attr('d_status');
    	var kf = $(this).attr('d_kfid');
    	if(dst=="true"){
	        var parm = {
	            key: $('.type_list dd.chk').text(),
	            kf: kf
	        }
	       /* if (parm.key.length < 1) {
	            alert('请选择关键词!');
	            return false
	        }*/
	        var url = '/index.php/Gj/createConnect';
	        $.post(url, parm,
	        function(obj) {
	            if (obj.s) {
					alert('已为您成功连接客服');
	                wx.closeWindow()
	            } else {
	                alert(obj.m)
	            }
	        },
	        'json')
    	}else{ 
    		$("#liu").attr('d_kfid',kf)
    		$(".pj").show();
    	}
    });
    $('#popaddrlist').fadeOut(function() {
        $('#popaddrlistmark').fadeOut()
    })
});
}

</script>
 <div class="tui"><a href="{:U('Gj/close')}">退出登录</a></div>
</body>
</html>

<script type="application/javascript">
	$("#liu").click(function(){
		var content=$("#pj").val();
		if(content==""){
			alert("留言内容不能为空");
			return false;
		}
		
	    var parm = {
            content: content,
            kf: $(this).attr('d_kfid')
          }
		$.get("{:U('Gj/liuyan')}",parm,function(obj){
			if(obj.s=="ok"){
				alert(obj.m);
				$(".pj").hide();
			}
			if(obj.s=="no"){
				alert(obj.m);
			}
		});
	});
	$("#close").click(function(){
		$(".pj").hide();
	});
</script>




